<!--
 * @Author: HaoDong
 * @Date: 2022-01-04 17:16:45
 * @LastEditTime: 2022-01-06 16:14:18
 * @LastEditors: HaoDong
 * @Description: 
 * @FilePath: \am-dashboard\src\pages\government\components\Bottom1.vue
 * 嘿嘿嘿！
-->
<template>
  <div id="bottom_1_container" style="height: 95%"></div>
</template>


<script>
import { get } from "@/utils/request.js";
import { Bar } from "@antv/g2plot";
export default {
  data() {
    return {
      engineerBindDeviceNumber: [],
      chart: null,
    };
  },
  computed: {
    chartData() {
      return this.engineerBindDeviceNumber.map((item) => {
        return {
          type: item.type,
          设备数目: item.value,
        };
      });
    },
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Bar("bottom_1_container", {
        data: this.chartData,
        xField: "设备数目",
        yField: "type",
        // seriesField: "year",
        legend: {
          position: "top-left",
        },
        tooltip: {
          formatter: (data) => {
            return { name: "设备数目", value: data.设备数目 + "个" };
          },
        },
        yAxis: {
          label: {
            style: {
              itemName: {
                width: "2em",
                overflow: "hidden",
              },
              fill: "rgb(255,255,255,0.7)",
            },
          },
        },
        // labels: {
        //   label: {
        //     style: {
        //       width: "10px",
        //       overflow: "hidden"
        //     }
        //   }
        // }
      });
      this.chart.render();
    },
    findEngineerBindDeviceNumber() {
      get("/dashboard/queryEngineerBindDeviceNumber").then((res) => {
        this.engineerBindDeviceNumber = res.data;
        this.initChart();
      });
    },
  },
  mounted() {
    this.findEngineerBindDeviceNumber();
    setInterval(() => {
      this.findEngineerBindDeviceNumber();
    }, 6000);
  },
  created() {},
};
</script>


